<template>
  <div id="login-page">
    <div class="loginbox">
      <i class="el-icon-user"></i>

      <h3 class="login_title">账号登录</h3>

      <input
        class="inp"
        type="text"
        placeholder="账号"
        v-model="user"
        @blur="checkuser"
      />
      <div class="warn">
        <span ref="span1"></span>
      </div>
      <input
        v-model="pwd"
        type="password"
        placeholder="密码"
        @blur="checkpwd"
        class="inp"
      />
      <div class="warn">
        <span ref="span2"></span>
      </div>
      <div class="box3">
        <!-- <span class="login">验证：</span> -->
        <input
          style="width: 100px"
          type="text"
          placeholder="请输入验证码"
          class="input-val"
          v-model.trim="yanzhen"
          @blur="login_yanzhen"
        />
        <canvas id="canvas" width="100px" height="33px" @click="handleCanvas">
        </canvas>
      </div>
      <button class="loginbt" @click="login">登录</button>
      <div class="loginb">
        <span @click="goregister">免费注册</span>
        <span>忘记密码</span>
      </div>
    </div>
  </div>
</template>
sc
<script>
import { mapMutations, mapState } from "vuex";
// import gt from "@/mock/gt";
// import { getUser } from "@/axios/index";
export default {
  name: "Login",
  data() {
    return {
      user: "",
      pwd: "",
      spanshow1: true,
      spanshow2: false,
      yanzhen: "", //输入框双向绑定的值
      true_code: "", //保存正确的验证码
      yanzhen_arr: [], //只用于传参，并且数组长度不能「多于」下面验证码遍历的次数，不然最终得到的true_code会有问题
      //比如下面是4个验证码，可以是[1,2,3,4]及以下，但是不能是[1，2，3，4，5]， 因为5无法被替换
    };
  },
  computed: {
    ...mapState(["uname"]),
  },
  mounted() {
    this.draw(this.yanzhen_arr);
  },
  methods: {
    ...mapMutations(["updateUname"]),

    //服务器验证账号密码
    //通过跳转首页
    // 更改登录|注册 样式
    //不通过弹窗
    checkuser() {
      let userreg = /^[a-zA-Z0-9][\w]{3,16}$/;
      setTimeout(() => {
        if (this.user == "") {
          this.$refs.span1.innerHTML = "请填写用户名";
        } else if (!userreg.test(this.user)) {
          this.$refs.span1.innerHTML = "用户名不合法";
        } else {
          this.$refs.span1.innerHTML = "";
        }
      }, 500);
      // getUser({
      //   uname: this.loginForm.loginName,
      //   upwd: this.loginForm.password,
      // }).then((res) => {
      //   console.log(res.data);
      //   if (res.data.code == 200) {
      //     alert("sucess");
      //   } else alert("fail");
      // });
    },
    checkpwd() {
      setTimeout(() => {
        let pwdreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,16}$/;
        if (this.pwd == "") {
          this.$refs.span2.innerHTML = "密码不可为空";
        } else if (!pwdreg.test(this.pwd)) {
          this.$refs.span2.innerHTML = "密码不合法";
        } else {
          this.$refs.span2.innerHTML = "";
        }
      }, 500);
    },
    draw(show_num) {
      var canvas_width = document.querySelector("#canvas").clientWidth;
      var canvas_height = document.querySelector("#canvas").clientHeight;
      var canvas = document.getElementById("canvas"); //获取到canvas
      var context = canvas.getContext("2d"); //获取到canvas画图
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var sCode =
        "a,b,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
      var aCode = sCode.split(",");
      var aLength = aCode.length; //获取到数组的长度

      //4个验证码数
      for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
        var txt = aCode[j]; //得到随机的一个内容
        show_num[i] = txt.toLowerCase(); // 依次把取得的内容放到数组里面
        var x = 10 + i * 20; //文字在canvas上的x坐标
        var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
      }
      //验证码上显示6条线条
      for (var i = 0; i <= 5; i++) {
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      // 验证码上显示31个小点;
      for (var i = 0; i <= 30; i++) {
        context.strokeStyle = this.randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }

      //最后把取得的验证码数组存起来，方式不唯一
      var num = show_num.join("");
      // console.log(num);
      this.true_code = num;
    },
    randomColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    //canvas点击刷新
    handleCanvas() {
      this.draw(this.yanzhen_arr);
    },
    login_yanzhen() {
      console.log(this.yanzhen, this.true_code);
      if (this.yanzhen != "" && this.yanzhen != this.true_code) {
        alert("验证码输入错误");
      } else {
        return true;
      }
    },
    checkall() {
      console.log(this.user, this.pwd);
    },
    goregister() {
      this.$router.push("/registe");
    },
    login() {
      if (
        !this.$refs.span1.innerHTML &&
        !this.$refs.span2.innerHTML &&
        this.yanzhen
      ) {
        this.updateUname(this.user);
        this.$router.push("/");
      }
    },
  },
};
</script>

<style scoped>
.loginbox .warn {
  height: 25px;
  color: red;
}
.loginbox .inp {
  display: block;
  height: 45px;
  width: 100%;
  /* margin-bottom: 25px; */
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.el-icon-user {
  color: #505458;

  font-size: 30px;
}
#login-page {
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  text-align: center;
  user-select: none;
}

.loginbox {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: rgba(255, 255, 255, 0.116);
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6a2;
}

.loginbt {
  height: 40px;
  border-radius: 15px;
  border: none;
  width: 100%;
  background-color: #fa7d3ed7;
  cursor: pointer;
  color: white;
}
.loginbt:hover {
  background-color: #fa7e3e;
}
.loginb {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.box3 {
  display: flex;
  margin-bottom: 15px;
}
#canvas {
  float: right;
  margin-right: 1%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  margin-right: 80px;
}

.input-val {
  width: 100px;
  background: #ffffff;
  height: 2.8rem;
  border-radius: 10px;
  border: none;
  padding: 0 0 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin-right: 10px;
}
</style>
